import React, { VFC} from "react";
import { Menu, Dropdown } from "antd";
import { DownOutlined } from '@ant-design/icons';
import { loginOut } from '@services/index'
import {useRecoilValue} from 'recoil'
import {getLoginInfoState} from '@selectors/selectLoginInfo'
import "./style.css";
const Nav: VFC = () => {
  const LoginInfo = useRecoilValue(getLoginInfoState)
  const handleOut = async () => {
    const userToken = LoginInfo.userToken
    const {status} = await loginOut({ userToken })
    if(status === '0'){
      sessionStorage.removeItem('userInfo')
      window.location.href = "/login";
    }
  };

  const renderIsOut = (
    <Menu>
      <Menu.Item key={0}>
        <a onClick={handleOut}>
            退出
        </a>
      </Menu.Item>
    </Menu>
  );
  return (
    <header>
      <div className="logo">
        <img src={require("@img/logo.png")} />
        <span>爱太空研学系统</span>
      </div>
      <nav>
        <Dropdown overlay={renderIsOut}>
          <span onClick={(e) => e.preventDefault()}>{LoginInfo?.userName||''}<DownOutlined /></span>
        </Dropdown>
      </nav>
    </header>
  );
};
export default Nav;
